<template>
    <view class="coreshop-modal-box" :class="show?'show':''">
        <view class="dialog">
            <image class="img" :src="src" lazy-load mode="widthFix" @tap="imgEvent"></image>
            <view class="coreshop-flex coreshop-align-center coreshop-self-end coreshop-justify-center">
                <u-icon name="close-circle" color="#ffffff" size="32" @click="closeEvent"></u-icon>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'coreshop-modal-img',
        props: {
            src: {
                type: String,
                default: ""
            },
            show: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            imgEvent() {
                this.$emit('imgTap');
            },
            closeEvent() {
                this.$emit('closeTap');
            }
        }
    }
</script>

<style lang="scss" scoped>
    .coreshop-modal-box { position: fixed; opacity: 0; top: inherit; left: inherit; right: inherit; bottom: inherit; z-index: 99999999; text-align: center; background: rgba(0, 0, 0, 0.6); transition: all 0.3s; pointer-events: none;
        &::before { content: "\200B"; display: inline-block; height: 100%; vertical-align: middle; }
        .dialog { position: relative; display: inline-block; vertical-align: middle; width: 310px;
            .img { width: 100%; border-radius: 3%; }
            .close { color: #dadada; top: 10px; position: relative; font-size: 26px; }
        }
    }
        .coreshop-modal-box.show { top: 0; left: 0; right: 0; bottom: 0; opacity: 1; pointer-events: auto; }
</style>
